<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>首页</title>
    <head th:include="include :: header"></head>
    <style type="text/css">
        html,body{margin:0;padding:0;}
        .btn-group{ margin-top: 20px;}
    </style>
</head>
<body>
<div id="app">
    <el-row style="margin: 10px 0 30px 0;">
        <el-col :span="20" :offset="2">
            <el-steps :active="active">
                <el-step title="项目信息"></el-step>
                <el-step title="数据库信息"></el-step>
                <el-step title="表信息"></el-step>
                <el-step title="生成代码"></el-step>
            </el-steps>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="10" :offset="7">
            <div v-show="active === 0">
                <el-form :model="task" label-width="120px">
                    <el-form-item label="groupId">
                        <el-input v-model="task.groupId"></el-input>
                    </el-form-item>
                    <el-form-item label="artifactId">
                        <el-input v-model="task.artifactId"></el-input>
                    </el-form-item>
                    <el-form-item label="moduleName">
                        <el-input v-model="task.moduleName"></el-input>
                    </el-form-item>
                    <el-form-item label="packageName">
                        <el-input v-model="task.packageName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="task.name"></el-input>
                    </el-form-item>
                    <el-form-item label="description">
                        <el-input v-model="task.description"></el-input>
                    </el-form-item>
                    <el-form-item label="author">
                        <el-input v-model="task.author"></el-input>
                    </el-form-item>
                    <el-form-item label="framework">
                        <el-radio-group v-model="task.framework">
                            <el-radio label="mybatis-elementui">mybatis-elementui</el-radio>
                            <el-radio label="springdata-bootstrap">springdata-bootstrap</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onNextBtnClick">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-show="active === 1">
                <el-form :model="task" label-width="120px">
                    <el-form-item label="数据库类型">
                        <el-select v-model="task.dbType" placeholder="请选择数据库类型" style="width:100%;">
                            <el-option label="mysql" value="mysql"></el-option>
                            <el-option label="oracle" value="oracle"></el-option>
                            <el-option label="sqlserver" value="sqlserver"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="host">
                        <el-input v-model="task.dbHost"></el-input>
                    </el-form-item>
                    <el-form-item label="port">
                        <el-input v-model="task.dbPort"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库">
                        <el-input v-model="task.dbSchema"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="task.dbUsername"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="task.dbPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onPrevBtnClick">上一步</el-button>
                        <el-button type="primary" @click="getSchemaInfo">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-show="active === 2">
                <el-table ref="multipleTable" :data="tableData" @selection-change="onSelectionChange">
                    <el-table-column type="selection"></el-table-column></el-table-column>
                    <el-table-column prop="name" label="name" ></el-table-column>
                    <el-table-column prop="comment" label="comment"></el-table-column>
                </el-table>
                <div class="btn-group">
                    <el-button type="primary" @click="onPrevBtnClick">上一步</el-button>
                    <el-button type="primary" @click="onSaveAndGenerateBtnClick">保存并生成代码</el-button>
                </div>
            </div>
            <div v-show="active === 3">
                <div class="btn-group">
                    <a :href="downloadUrl">点击下载</a>
                    <el-button type="primary" @click="onPrevBtnClick">上一步</el-button>
                </div>
            </div>
        </el-col>
    </el-row>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            active: 0,
            task: {
                groupId: 'com.ahccc.acp',
                artifactId: 'acp-emergencyalert',
                moduleName: 'emergencyalert',
                packageName: 'com.ahccc.acp.emergencyalert',
                name: 'emergencyalert',
                description: 'ahccc acp emergency alert',
                author: 'lichunqing',

                dbType: 'mysql',
                dbHost: '127.0.0.1',
                dbPort: '3306',
                dbSchema: 'ahccc_admin',
                dbUsername: 'root',
                dbPassword: 'ahcccrjb',

                framework: 'mybatis-elementui',
            },
            tableData: [],
            selectedTableNames: [],
            downloadUrl: '',
        },
        computed: {
            packageName: function () {
                return this.task.groupId + '.' + this.task.moduleName
            }
        },
        watch: {
            packageName: function(val){
                this.task.packageName = val;
            }
        },

        mounted: function(){
        },
        methods: {
            getSchemaInfo: function() {
                var self = this;
                axios.get('/task/getSchemaInfo', {
                    params: self.task
                }).then(function(res){
                    self.tableData = res;
                    self.active ++;
                })
            },
            onSaveAndGenerateBtnClick: function(){
                var self = this;
                if(_.size(self.selectedTableNames) === 0){
                    this.$message({
                        message: 'please select the table info',
                        type: 'warning'
                    });
                    return;
                }
                var params = _.assign(self.task);
                params.selectedTableNames = self.selectedTableNames
                var promise = axios.post('/task/generate', Qs.stringify(params, { arrayFormat: 'brackets' }))
                promise.then(function(res){
                    self.downloadUrl = '/file/download?path=' + res;
                    self.active ++;
                })
                self.active ++;
            },
            onSelectionChange: function(selection){
                this.selectedTableNames = _.map(selection, 'name');
            },
            onPrevBtnClick: function(){
                if(this.active -- < 0){
                    this.active = 0;
                }
            },
            onNextBtnClick: function(){
                if(this.active ++ > 3){
                    this.active = 0;
                }
            },
        }
    });
</script>
</body>
</html>